<template>
<div>
  <!-- 首页头部 -->
  <header class="header">
       <ul>
        <li style="font-size: 20px;">陶小宝</li><span>|</span>
        <li>新鲜</li><span>·</span>
        <li>亲民</li><span>·</span>
        <li>快捷</li>
       </ul>
       <van-search
  v-model="value"
  shape="round"
  background="#edc121"
  placeholder="请输入搜索关键词"
/>
    </header>
    <!-- 轮播图 -->
    <div>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
  </van-swipe>
  </div>
  <!-- 商品导航 -->
  <div>
  <van-grid :column-num="5">
  <van-grid-item v-for="value in 10" :key="value" icon="photo-o" text="文字" />
</van-grid>
</div>

    <!-- 主会场图片 -->
    <div>
      <img src="@/assets/assets/main.png" alt="">
    </div>
    <!-- 商品列表 -->
    <div>
<GoodsItem/>
    </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Search, Swipe, SwipeItem, Grid, GridItem } from 'vant'
import { getHomeData } from '@/api/home'
import GoodsItem from '@/components/GoodsItem.vue'

Vue.use(Grid)
Vue.use(GridItem)

Vue.use(Swipe)
Vue.use(SwipeItem)

Vue.use(Search)
export default {
  comments: {
    GoodsItem
  }
}
</script>

<style lang="scss" scoped>
.header{
  top: 0;
  background-color: #edc121;
  width: 100%;
  padding: 10px 0px 10px 10px;
  position: fixed;
  z-index: 999;
   ul{
    color: rgb(244, 247, 242);
    display: flex;
    align-items: center;
    list-style: none;
   }
   span{
    margin: 0px 5px;
   }
   .van-search {
  /* 重置默认边距 */
  margin: 0 10px 0px 5px; /* 左右边距与标题对齐 */
  padding: 0;

  /* 重置背景与容器一致 */
  background: none;

  /* 调整高度与标题对齐 */
  height: 32px;

  /* 调整圆角和内边距 */
  .van-cell {
    border-radius: 16px; /* 圆角与设计一致 */
    padding: 5px 10px; /* 输入框内边距 */
  }
}
}
.my-swipe{
   margin-top: 79px;
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
}
</style>
